<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
</head>
<style>
  .table-box{
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translateX(-50%);
    text-align: center;
    border: 1px solid black;
  }
  .table-box tr>td{
    width: 150px;
    border: 1px solid black;
  }

  .add-box,
  .update-box{
      position: absolute;
      left: 50%;
      top: 30%;
      transform: translateX(-50%);
      display: none;
      width: 250px;
      height: 200px;
      border: 1px solid black;
      text-align: center;
      line-height: 40px;

      background-color: white;
      z-index: 10;

  }

</style>

<body>
<button onclick="addUser()">添加</button>
    <div class="add-box">
        添加</br>
        用户名:<input type="text" name="username1"></br>
        密&nbsp;&nbsp;&nbsp;码:<input type="text" name="password1">
        <button onclick="enterAdd()">确认添加</button>
    </div>

    <div class="update-box">
        更改</br>
        用户名:<input type="text" name="username2"></br>
        密&nbsp;&nbsp;&nbsp;码:<input type="text" name="password2">
        <button onclick="enterUpdate()">确认更改</button>
    </div>

  <table class="table-box">
    <tr>
      <td>id</td>
      <td>用户名</td>
      <td>密码</td>
      <td>
         操作
      </td>
    </tr>
  </table>

  <script src="js/jquery.js"></script>
<script>
    const tableElm = document.querySelector('.table-box')
    const updateElm =document.querySelector('.update-box')
    const addElm =document.querySelector('.add-box')

    const usernameElm1 = document.getElementsByName('username1')[0]
    const passwordElm1 = document.getElementsByName('password1')[0]

    const usernameElm2 = document.getElementsByName('username2')[0]
    const passwordElm2 = document.getElementsByName('password2')[0]
    // creatTrElm(1,'zs',1234)
    loadUser()

    function loadUser(){
        $.post('user?value=select',(res)=>{
            if (res.code==200){
                const users = res.data
                console.log(users)
                for (let i=0; i<users.length; i++){
                    creatTrElm(users[i].id,users[i].username,users[i].password)
                }
            }
        },'json')
    }


  function creatTrElm(id,username,password){
    const trElm = document.createElement('tr');
      const tdElm = document.createElement('td')
      const td1Elm = document.createElement('td')
      const td2Elm = document.createElement('td')
      tdElm.innerText=`${id}`
      td1Elm.innerHTML=`${username}`
      td2Elm.innerHTML=`${password}`

      const td3Elm = document.createElement('td')
        const btn1Elm=document.createElement('button')
        const btn2Elm=document.createElement('button')
        btn1Elm.innerHTML='更改'
        btn2Elm.innerHTML='删除'
        btn1Elm.onclick=updateUser
        btn2Elm.onclick=deleteUser
        td3Elm.append(btn1Elm,btn2Elm)
    trElm.append(tdElm,td1Elm,td2Elm,td3Elm)
    tableElm.append(trElm)
  }


  let updateId
  function updateUser(){
      updateElm.style.display='block'
      usernameElm2.value=this.parentNode.parentNode.children[1].innerText
      passwordElm2.value=this.parentNode.parentNode.children[2].innerText
      updateId =this.parentNode.parentNode.children[0].innerText
      // let id=this.parentNode.parentNode.children[0].innerText
      // $.post('user?value=selectById',{'id':id},(res)=>{
      //     usernameElm2.innerText=`${res.data.username}`
      //     passwordElm2.innerText=`${res.data.password}`
      // })
      // console.log(this.parentNode.parentNode.children[1].innerText)

  }

    function addUser(){
        addElm.style.display='block'
    }

    function enterAdd(){
        let username = document.getElementsByName('username1')[0].value
        let password = document.getElementsByName('password1')[0].value
        // console.log(username)
        $.post('user?value=add',{'username':username,'password':password},(res)=>{
            if (res.code==200){
                addElm.style.display='none'
                window.location.reload()
            }
        })
    }

    function enterUpdate(){
        let username = document.getElementsByName('username2')[0].value
        let password = document.getElementsByName('password2')[0].value

        $.post('user?value=update',{'id':updateId,'username':username,'password':password},(res)=>{
            if (res.code==200){
                updateElm.style.display='none'
                window.location.reload()
            }
        })
    }

    function deleteUser(){
        let id=this.parentNode.parentNode.children[0].innerText
        console.log(id)
        // tableElm.removeChild(this.parentNode.parentNode)
        $.post('user?value=delete',{'id':id},(res)=>{
          if (res.code==200){
              console.log(1)
              // this.parentNode.parentNode.parentNode
              tableElm.removeChild(this.parentNode.parentNode)
          }
        })
    }
</script>
</body>
</html>